<template>
  <div class="table-page">
    <GiTable
        row-key="id"
        title="参加双选会"
        :data="dataList"
        :columns="columns"
        :loading="loading"
        :scroll="{ x: '100%', y: '100%', minWidth: 1000 }"
        :pagination="pagination"
        :disabled-tools="['size']"
        :disabled-column-keys="['name']"
        @refresh="search"
    >
      <template #custom-left>
        <a-input v-model="queryForm.title" placeholder="请输入主题" allow-clear @change="search">
          <template #prefix>
            <icon-search/>
          </template>
        </a-input>
        <a-select v-model="queryForm.status" placeholder="请选择状态" @change="search">
          <a-option :value="0">未开始</a-option>
          <a-option :value="1">进行中</a-option>
          <a-option :value="2">已结束</a-option>
        </a-select>
        <a-button @click="reset">重置</a-button>
      </template>
      <template #status="{ record }">
        <a-tag v-if="record.status === 0" color="orange">未开始</a-tag>
        <a-tag v-if="record.status === 1" color="green">进行中</a-tag>
        <a-tag v-if="record.status === 2" color="red">已结束</a-tag>
      </template>
      <template #name="{ record }">
        <a-link @click="onDetail(record)">{{ record.name }}</a-link>
      </template>
      <template #action="{ record }">
        <a-space>
          <a-link @click="companyApply(record.id)">企业报名</a-link>
          <a-link @click="addPosition(record.id)">查看/维护岗位信息</a-link>
        </a-space>
      </template>
    </GiTable>
    <JobfairDetailDrawer ref="JobfairDetailDrawerRef"/>
  </div>
</template>

<script setup lang="ts">
import JobfairDetailDrawer from './JobfairDetailDrawer.vue'
import {type JobfairResp, type JobfairQuery, listJobfair, companySignUp, getCompanyIdByUserId} from '@/apis'
import type {TableInstanceColumns} from '@/components/GiTable/type'
import {useTable} from '@/hooks'
import {isMobile} from '@/utils'
import has from '@/utils/has'
import {Message} from "@arco-design/web-vue";
import router from "@/router";
import path from "node:path";

defineOptions({name: 'Jobfair'})

const queryForm = reactive<JobfairQuery>({
  title: "",
  status: "",
  sort: ['createTime,desc']
})


const {
  tableData: dataList,
  loading,
  pagination,
  search,
} = useTable((page) => listJobfair({...queryForm, ...page}), {immediate: true})

const columns: TableInstanceColumns[] = [
  {title: '主题', dataIndex: 'title', slotName: 'title'},
  {title: '开始时间', dataIndex: 'startDate', slotName: 'startDate'},
  {title: '结束时间', dataIndex: 'endDate', slotName: 'endDate'},
  {title: '地点', dataIndex: 'location', slotName: 'location'},
  {title: '状态', dataIndex: 'status', slotName: 'status'},
  {
    title: '操作',
    slotName: 'action',
    width: 300,
    align: 'center',
    fixed: !isMobile() ? 'right' : undefined,
  }
]

// 重置查询表单并搜索
const reset = () => {
  queryForm.title = ""
  queryForm.status = ""
  search()
}

const addPosition = async (jobfairId: string) => {
  const res = await getCompanyIdByUserId();
  const companyId = res.data as string;
  await router.push({
    path: '/hrPositionManage',
    query: {jobfairId: jobfairId, companyId: companyId}
  })
}
// 企业报名
const companyApply = async (jobfairId: string) => {
  const res = await companySignUp(jobfairId)
  if (res.code === 200) {
    Message.success(res.msg)
    // todo 跳转到岗位管理界面
    const id = res.data as string
    await router.push({
      path: '/hrPositionManage',
      query: {jobfairId: jobfairId, companyId: id},
    })
  } else {
    Message.error(res.msg)
  }
}

const JobfairDetailDrawerRef = ref<InstanceType<typeof JobfairDetailDrawer>>()
// 详情
const onDetail = (item: JobfairResp) => {
  JobfairDetailDrawerRef.value?.onDetail(item.id)
}
</script>

<style lang="scss" scoped></style>
